<template>
    <div>
        <Row class="formRow">
          <Col span="3" class="rightRow">
            <span class="ModelInputTitle">日志类型</span>
          </Col>
          <Col span="3" class="leftRow">
            <Select  size="large" style="width:100%" v-model="formInline.logType">
              <Option v-for="log1 in logTypeArr" :value="log1.key" :key="log1.key">{{log1.value}}</Option>
            </Select>
          </Col>
          <Col span="3" class="rightRow">
          <span class="ModelInputTitle">客户端类型</span>
          </Col>
          <Col span="3" class="leftRow">
          <Select  size="large" style="width:100%" v-model="formInline.clientType">
            <Option v-for="client in clientTypeArr" :value="client.key" :key="client.key">{{client.value}}</Option>
          </Select>
          </Col>
          <Col span="12"  class="leftRow">
            <Button type="primary" @click="onSubmit">查询</Button>
            <Button type="primary" @click="resetForm">重置</Button>
          </Col>
        </Row>

        <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"></Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :total="total" :placement="placement" :current="1" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
          </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
  import axios from  "axios"
    export default {
        data() {
            return {
              formInline:{
                logType:"",
                clientType:""
              },
              loading:true,
              page:1,
              pageSize:10,
              placement:"bottom",
              total:0,
              tableData:[],
              cloums:[
                {
                  title: '日志类型',
                  key: 'logType',
                  width:150,
                  align:"center"
                },
                {
                  title: '客户端类型',
                  key: 'clientType',
                  width:180,
                  align:"center"
                },
                {
                  title: '订单ID',
                  key: 'orderId',
                  width:150,
                  align:"center"
                },
                {
                  title: '订单状态',
                  key: 'orderState',
                  width:200,
                  align:"center"
                },
                {
                  title: '订单流程状态',
                  key: 'processState',
                  width:200,
                  align:"center"
                },
                {
                  title: '标本ID',
                  key: 'specimenId',
                  width:120,
                  align:"center"
                },
                {
                  title: '备注',
                  key: 'remark',
                  width:300,
                  align:"center"
                },
                {
                  title: '创建人',
                  key: 'creator',
                  width:150,
                  align:"center"
                },
                {
                  title: '修改人',
                  key: 'updater',
                  width:150,
                  align:"center"
                }
              ],
              logTypeArr:[
                {
                  key:"01",
                  value:"用户登录日志"
                },
                {
                  key:"02",
                  value:"订单日志"
                },
                {
                  key:"03",
                  value:"支付日志"
                },
                {
                  key:"04",
                  value:"退款日志"
                },
                {
                  key:"05",
                  value:"采样日志"
                },
                {
                  key:"06",
                  value:"接收日志"
                }
              ],
              clientTypeArr:[
                {
                  key:"01",
                  value:"pc"
                },
                {
                  key:"02",
                  value:" 用户微信端"
                },
                {
                  key:"03",
                  value:" 医生端app"
                },
                {
                  key:"04",
                  value:"护士端app"
                },
                {
                  key:"05",
                  value:"物流端app"
                }
              ]

            }
        },
        mounted(){
          this.init();
        },
      methods:{
          init(page,pageSize,logType,clientType,valid){
                var qs = require("qs");
                var param = qs.stringify({
                  page:page?page:this.page,
                  pageSize:pageSize?pageSize:this.pageSize,
                  logType:logType?logType:"",
                  clientType:clientType?clientType:"",
                  valid:valid?valid:""
                });
            axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
            axios.post("/log/querySysLogListByPage",param).then((res)=>{
                  if(res.data.code == "000000"){
                    this.loading = false;
                    this.total = res.data.count;
                    for(let i=0;i<res.data.data.length;i++){
                      for(let j=0;j<this.clientTypeArr.length;j++){
                        if(res.data.data[i].clientType == this.clientTypeArr[j].key){
                          res.data.data[i].clientType = this.clientTypeArr[j].value;
                        }
                      }
                      for(let j=0;j<this.logTypeArr.length;j++){
                        if(res.data.data[i].logType == this.logTypeArr[j].key){
                          res.data.data[i].logType = this.logTypeArr[j].value;
                        }
                      }
                    }
                    this.tableData = res.data.data;
                  }else{
                    this.$Notice.error({title:res.data.msg})
                  }
            })
          },
        onSubmit(){
            this.init(this.page,this.pageSize,this.formInline.logType,this.formInline.clientType,"");
        },
        resetForm(){
          this.formInline.logType = "";
          this.formInline.clientType = "";
        },
        changePage(page){
          this.page = page;
          this.loading = true;
          this.init();
        },
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.pageSize = size;
          this.loading = true;
          this.init();
        }
      }
    }
</script>
